<template>
  <div class="about" style="border-bottom: 1px solid #dfdfdf; font-size: 14px">
    <div
      style="
        display: flex;
        height: 40px;
        padding: 0 200px;
        background-color: #19b4ea;
      "
    >
      <div
        @click="toHomePage"
        class="top-title"
        style="
          padding-right: 20px;
          border-right: 1px solid rgb(230 230 230 / 40%);
          line-height: 40px;
          color: #ffffff;
        "
      >
        首页
      </div>
      <div
        @click="toShopPage"
        class="top-title"
        style="
          padding-right: 20px;
          border-right: 1px solid rgb(230 230 230 / 40%);
          line-height: 40px;
          color: #ffffff;
          margin-left: 20px;
        "
      >
        在线商城
      </div>
      <div
        class="top-title"
        style="
          padding-right: 20px;
          border-right: 1px solid rgb(230 230 230 / 40%);
          line-height: 40px;
          color: #ffffff;
          margin-left: 20px;
        "
      >
        会员中心
      </div>
      <div
        class="top-title"
        style="line-height: 40px; color: #ffffff; margin-left: 20px"
      >
        收藏本站
      </div>
      <div style="flex: 1; display: flex">
        <div style="flex: 1"></div>
        <div style="width: 170px; display: flex">
          <el-button
            v-if="this.$store.state.userName == ''"
            type="text"
            style="color: #ffffff"
            class="top-title"
            @click="toLoginPage"
            >登录</el-button
          >

          <el-button
            v-if="this.$store.state.userName == ''"
            type="text"
            @click="toRegisterPage"
            style="color: #ffffff; margin-right: 10px"
            class="top-title"
            >注册</el-button
          >
          <div
            style="
              background-color: rgb(223 221 221 / 40%);
              display: flex;
              width: 100px;
              padding: 0 10px;
            "
            class="top-title"
          >
            <!-- <img
              src="../assets/logo.png"
              style="
                width: 20px;
                height: 20px;
                margin-top: 10px;
                margin-right: 5px;
              "
            /> -->
            <el-button
              v-if="this.$store.state.userName != ''"
              type="text"
              style="color: #ffffff"
              class="top-title"
              @click="toShopCartPage()"
              >购物车</el-button
            >
          </div>
          <div
            style="
              <!-- background-color: rgb(223 221 221 / 40%); -->
              display: flex;
              width: 100px;
              padding: 0 10px;
            "
            class="top-title"
          >
            <el-button
              v-if="this.$store.state.userName != ''"
              type="text"
              style="color: #ffffff"
              class="top-title"
              @click="toOrdersPage"
              >我的订单</el-button
            >
          </div>
          <div
            style="
              <!-- background-color: rgb(223 221 221 / 40%); -->
              display: flex;
              width: 100px;
              padding: 0 10px;
            "
            class="top-title"
          >
            <el-button
              v-if="this.$store.state.userName != ''"
              type="text"
              style="color: #ffffff"
              class="top-title"
              @click="toUserInfoPage"
              >个人信息</el-button
            >
          </div>
          <div
            style="
              <!-- background-color: rgb(223 221 221 / 40%); -->
              display: flex;
              width: 100px;
              padding: 0 10px;
            "
            class="top-title"
          >
            <el-button
              v-if="this.$store.state.userName != ''"
              type="text"
              @click="doLoginout"
              style="color: #ffffff; margin-right: 10px"
              class="top-title"
              >退出登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- <div style="margin: 0 200px; height: 80px; line-height: 80px">
      <div style="display: flex">
        <img
          src="../assets/logo.png"
          style="cursor: pointer; height: 60px; margin-top: 10px"
        />
        <div
          class="title"
          style="
            margin-right: 20px;
            cursor: pointer;
            color: gray;
            margin-left: 30px;
          "
        >
          首页
        </div>
        <div
          class="title"
          style="margin-right: 20px; cursor: pointer; color: gray"
        >
          电子数码
        </div>
        <div
          class="title"
          style="margin-right: 20px; cursor: pointer; color: gray"
        >
          家居百货
        </div>
        <div
          class="title"
          style="margin-right: 20px; cursor: pointer; color: gray"
        >
          母婴用品
        </div>
        <div
          class="title"
          style="margin-right: 20px; cursor: pointer; color: gray"
        >
          关于我们
        </div>
        <div
          class="title"
          style="margin-right: 20px; cursor: pointer; color: gray"
        >
          联系我们
        </div>
        <div style="flex: 1; text-align: right">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            style="width: 300px"
          >
            <el-button icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'IndexTop',
  data() {
    return {
      input: '',
    }
  },
  computed: {
    // 监控数据的获取
    ...mapGetters(['userName', 'userId']),
  },
  mounted() {},
  methods: {
    doLoginout() {
      //将数据重置
      this.$store.commit('saveIsLogin', false) //设置vuex中的登陆状态为已经登陆
      this.$store.commit('saveRealname', '')
      this.$store.commit('saveSex', '')
      this.$store.commit('saveAddress', '')
      this.$store.commit('saveIdCard', '')
      this.$store.commit('saveEmail', '')
      this.$store.commit('saveAge', '')
      this.$store.commit('savePhone', '')
      this.$store.commit('saveSex', '')
      this.$store.commit('saveType', '')
      this.$store.commit('saveUsername', '')
      this.$store.commit('saveUserId', '')
      this.$router.push({ path: '/login' })
    },
    homePage() {
      this.$router.push({ path: '/home/index' })
    },
    toShopCartPage(uid) {
      this.$router.push({ path: '/shopCart' })
    },
    toShopPage() {
      console.log('toShopPage....')
      this.$router.push({ path: '/about' })
    },
    toHomePage() {
      console.log('toShopPage....')
      this.$router.push({ path: '/' })
    },
    toOrdersPage() {
      console.log('toOrdersPage....')
      this.$router.push({ path: '/order' })
    },
    toLoginPage() {
      console.log('toLoginPage....')
      this.$router.push({ path: '/login' })
    },
    toRegisterPage() {
      console.log('toRegisterPage....')
      this.$router.push({ path: '/register' })
    },
    toUserInfoPage() {
      console.log('toUserInfoPage....')
      this.$router.push({ path: '/userInfo' })
    },
  },
}
</script>

<style>
.top-title:hover {
  cursor: pointer;
  color: #e5e5e5 !important;
}
.title {
  font-weight: bold;
  font-size: 18px;
}
.title:hover {
  color: #c250c6 !important;
}
</style>
